<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Tractography</title>
    <link rel="stylesheet" href="light.css" />
  </head>
  <body>
    <noscript>
      <strong>niivue requires JavaScript. Please enable it to continue.</strong>
    </noscript>
    <header>
      <label for="fiberRadius">Radius</label>
      <input
        type="range"
        min="0"
        max="20"
        value="0"
        class="slider"
        id="fiberRadius"
      />
      <label for="fiberLengthSlider">Length</label>
      <input
        type="range"
        min="1"
        max="80"
        value="3"
        class="slider"
        id="fiberLengthSlider"
      />
      <label for="fiberDitherSlider">Dither</label>
      <input
        type="range"
        min="0"
        max="10"
        value="1"
        class="slider"
        id="fiberDitherSlider"
      />
      <label for="dpsThresholdSlider">Per-streamline threshold</label>
      <input
        type="range"
        min="0"
        max="5"
        value="0"
        class="slider"
        id="dpsThresholdSlider"
      />
      <label for="fiberColor">Choose fiber coloration:</label>
      <select id="fiberColor">
        <option value="Global" selected>Global direction</option>
        <option value="Local">Local direction</option>
        <option value="Fixed">Fixed</option>
        <option value="DPV0">First Per Vertex Type (if available)</option>
        <option value="DPS0">First Per Streamline Type (if available)</option>
      </select>
      <label for="fiberDecimation">Fiber reduction:</label>
      <select id="fiberDecimation">
        <option value="1">100%</option>
        <option value="2">50%</option>
        <option value="4">25%</option>
        <option value="10">10%</option>
      </select>
    </header>
    <main id="container">
      <canvas id="gl1"></canvas>
    </main>
  </body>
</html>
<script type="module" async>
  import * as niivue from "../dist/index.js"
  fiberRadius.oninput = function () {
    nv1.setMeshProperty(nv1.meshes[0].id, "fiberRadius", this.value * 0.1)
    nv1.updateGLVolume()
  }
  fiberLengthSlider.oninput = function () {
    nv1.setMeshProperty(nv1.meshes[0].id, "fiberLength", this.value)
  }
  fiberDitherSlider.oninput = function () {
    nv1.setMeshProperty(nv1.meshes[0].id, "fiberDither", this.value * 0.1)
  }
  fiberColor.onchange = function () {
    const colorName = document.getElementById("fiberColor").value
    nv1.setMeshProperty(nv1.meshes[0].id, "fiberColor", colorName)
  }
  dpsThresholdSlider.onchange = function () {
    nv1.setMeshProperty(nv1.meshes[0].id, "dpsThreshold", parseFloat(this.value))
  }
  fiberDecimation.onchange = function () {
    const stride = document.getElementById("fiberDecimation").value
    nv1.setMeshProperty(nv1.meshes[0].id, "fiberDecimationStride", stride)
  }
  var volumeList1 = [{ url: "../images/mni152.nii.gz" }]
  var nv1 = new niivue.Niivue({
    show3Dcrosshair: true,
    backColor: [0.8, 0.8, 1, 1],
  })
  nv1.opts.isColorbar = true
  nv1.setSliceType(nv1.sliceTypeRender)
  await nv1.attachTo("gl1")
  await nv1.loadVolumes(volumeList1)
  nv1.volumes[0].colorbarVisible = false
  await nv1.loadMeshes([{ url: "../images/dpsv.trx", rgba255: [0, 142, 0, 255]}])
  nv1.setMeshProperty(nv1.meshes[0].id, "colormap", "plasma"); //colormap for DPV and DPS
  nv1.setMeshProperty(nv1.meshes[0].id, "rgba255", [0, 255, 255, 255]); //color for fixed
  nv1.setClipPlane([-0.1, 270, 0])
  fiberColor.onchange()
</script>
